<template>
  <div class="waveBox">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <div class="displayCheck">
        <el-checkbox-group
          v-model="isReview"
          :disabled="disabledReview"
        >
          <el-checkbox class="checked">是否需要复核</el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox class="checked">是否限制数量</el-checkbox>
        </el-checkbox-group>
      </div>


      <el-form-item
        label="最大订单量"
        prop="maxOrderQuantity"
        label-width="100px"
      >
        <el-input
          :disabled="!checkedCities"
          v-model="form.maxOrderQuantity"
          style="width='100px'"
          type="number"
          min='1'
          minlength="1"
          maxlength="10"
          @input="changeWave"
        />
      </el-form-item>
      <p>{{contentRef}}</p>
      <p class="confirm">
        <el-button type="primary" :loading="waveLoading" @click="confirm">确定</el-button>
      </p>
    </el-form>
  </div>
</template>

<script>
import { saveWave, waveTips, judgeRecheck } from "@/api/outStorage";
import { validateInteger } from "@/utils/validate.js";
export default {
  name: "wavePicking",
  props: {
    waveCodeList: {
      type: Array,
      required: true,
    },
    shipmentCodes: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      form: {
        maxOrderQuantity: "",
      },
      checkedCities: false,
      isReview: false,
      disabledReview: false,
      rules: {
        maxOrderQuantity: [
          {
            required: false,
            validator(rule, value, callback) {
              if (!rule.required && !value) {
                return callback();
              }
              validateInteger(value)
                ? callback()
                : callback(new Error("输入格式不正确"));
            },
          },
        ],
      },
      disabled:false,
      contentRef:'',
      timer: null,
      waveLoading: false
    };
  },
  created() {
    this.funcHint()
    this.handleJudgeRecheck()
  },
  methods: {
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.disabled = true
          let review
          if(this.isReview === true){
            review = 1
          }else{
            review = 0
          }
          const parms = {
            codes: this.waveCodeList,
            maxOrderQuantity: this.form.maxOrderQuantity,
            isReview: review
          }
          if(!this.form.maxOrderQuantity){
            delete parms.maxOrderQuantity
          }
          this.waveLoading = true
          const rLoading = this.openLoading({
            text: '生成中...',
            duration: 'x'
          })
          saveWave(parms).then((response) => {
            this.$message.success(response.msg);
          }).finally(()=>{
            this.disabled = false
            rLoading.close();
            this.$emit("refresh");
          })
        } else {
          return false;
        }
      });
    },
    handleCheckedCitiesChange(val) {
      // this.funcHint()
      if(!val){
          this.form.maxOrderQuantity ='';
      }
      this.rules.maxOrderQuantity[0].required = val;
    },
    changeWave(val){
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.funcHint()
      }, 500)
    },
    // 提示信息：
    funcHint(){
      const parms = {
        codes: this.waveCodeList,
        maxOrderQuantity: this.form.maxOrderQuantity
      }
      if(!this.form.maxOrderQuantity){
        delete parms.maxOrderQuantity
      }
      waveTips(parms).then((response) => {
        this.contentRef = response.msg
      })
    },
    // 处理货主是否需要复核
    handleJudgeRecheck() {
      judgeRecheck(this.shipmentCodes).then(res => {
        if (res.data.review === 1) {
          this.isReview = true
          this.disabledReview = true
        }
      })
    }
  },
};
</script>

<style scoped>
.waveBox {
  padding: 0 16px 0;
}
.checked {
  margin-left: 4px;
  line-height: 50px;
  margin-right: 8px;
}
/deep/.el-input--medium .el-input__inner {
  width: 180px;
  padding: 0 0 0 10px;
}
/deep/.el-form-item--medium .el-form-item__label {
  font-weight: 400;
}
.confirm {
  margin-top: 20px;
  text-align: right;
}
.displayCheck{
  display: flex;
  justify-content: start;
}
</style>
